<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot" slot="left" @click="goBack">
					<image style="height: 63rpx;width: 50rpx; scale: 0.8;" src="@/static/images/review/fanhui.png" />
				</view>
				<view class="u-nav-slot-center" slot="center">
					<span>词汇测试</span>
				</view>
				<view class="u-nav-slot-right flex-align-center" slot="right">
					<button plain class="back-btn">测试记录</button>
				</view>
			</u-navbar>
		</view>
		<view class="content flex-center">
			<view class="content-left">
				<view class="content-left-item" :class="currentTab=== item.id ? 'active':''" v-for="item in tabList"
					:key="item.id" @click="tabChange(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="content-right">
				<view class="content-right-item flex-align-center" v-for="item in 10">
					<view class="content-right-item-head flex-center">
						<view class="bj-head flex-center">
							智能认词
						</view>
					</view>
					<view class="right-title-list flex-between">
						<view class="right-title-list-item flex-center">
							<span class="title">今日已学测试</span>
							<span>20</span>
						</view>
						<view class="right-title-list-item flex-center">
							<span class="title">已学测试</span>
							<span>24</span>
						</view>
						<view class="right-title-list-item flex-center">
							<span class="title">生词测试</span>
							<span>24</span>
						</view>
						<view class="right-title-list-item flex-center">
							<span class="title">熟词测试</span>
							<span>24</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
						id: 0,
						name: '全词测试'
					},
					{
						id: 1,
						name: '词汇测试'
					},
					{
						id: 2,
						name: '例句测试'
					},
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.currentTab = val;
			}
		}
	}
</script>

<style scoped lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #505CFE;
		display: flex;
		flex-direction: column;
		// padding: 20rpx;
	}

	.content {
		flex: 1;
		padding: 0 30rpx 30rpx 30rpx;

		.content-left {
			width: px_2_vw(90);
			height: 100%;
			padding: 90rpx 0;
			display: flex;
			text-align: center;
			flex-direction: column;
			justify-content: space-between;

			.content-left-item {
				width: px_2_vw(90);
				height: px_2_vw(194);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #9692F1;
				background: #9BA2FF;
				color: #FDFDFF;
				font-size: px_2_vw(30);
				border-right: none;
				writing-mode: vertical-rl;
				/* 竖直排列，从右向左 */
				letter-spacing: 5rpx;
				/* 设置竖向间距 */
				border-radius: 20rpx 0 0 20rpx;
			}
		}

		.content-right {
			border-radius: 60rpx;
			background: #fff;
			width: calc(100% - 90rpx);
			height: px_2_vw(900);
			overflow-y: auto;
			.content-right-item {
				padding: 30rpx 30rpx 30rpx 0;
				margin-bottom: 50rpx;
			}
			.content-right-item-head {
				width: px_2_vw(206);
				height: px_2_vw(125);
				background-image: url('@/static/images/review/huan.png');
				background-size: 100% 100%;
				color: #010101;
				font-weight: bold;
				
				.bj-head {
					width: px_2_vw(104);
					height: px_2_vw(104);
					font-size:px_2_vw(24);
					background-image: url('@/static/images/review/planet-12.png');
					background-size: 100% 100%;
				}
			}
			.right-title-list {
				flex: 1;
				padding-left: 30rpx;
				.right-title-list-item {
					width: px_2_vw(315);
					height: px_2_vw(87);
					background-image: url('@/static/images/review/bj-cihui.png');
					background-size: 100% 100%;
					color: #595959;
				}
				.title {
					margin-right: 30rpx;
				}
			}
		}
	}

	.active {
		background: #fff !important;
		color: #505CFE !important;
	}
</style>